<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.lzqcode.com" />
    <meta name="robots" content="all" />
    <title>留言板</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="stylesheet" href="css/gloable.css" />
    <link rel="stylesheet" href="css/nprogress.css" />
    <link rel="stylesheet" href="css/message.css" />
    <link rel="shortcut icon" href="image/icons.ico" />

</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Mr.Jin</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="article.html">博客</a></li>
                        <li><a href="message.html">留言</a></li>
						<li><a href="diary.html">日记</a></li>
                        <li><a href="link.html">友链</a></li>
                    </ul>
                </nav>
                <a href="#" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
    <div class="container-inner">
        <section class="msg-remark">
            <h1>留言板</h1>
            <p>
                不为别的，交个朋友！
            </p>
        </section>
        <div class="textarea-wrap message" id="textarea-wrap">
            <form class="layui-form blog-editor" action=""  lay-filter="noticeForm">
                <div class="layui-row layui-col-space10">
                        <div class=" layui-col-md4">
                            <input type="text" name="membername" lay-verify="required" autocomplete="on" class="layui-input" placeholder="称呼（必填）">
                        </div>
                        <div class=" layui-col-md4">
                            <input type="text" name="memberemail" lay-verify="required|email" autocomplete="on" class="layui-input" placeholder="邮箱（必填）">
                        </div>
                        <div class=" layui-col-md4">
                            <input type="text" name="memberurl"   class="layui-input" placeholder="网址（不必填）">
                        </div>
                </div>
                <div class="layui-form-item">
                    <textarea name="editorContent"     lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label" style="width:200px;margin-left:200px">有回复时通知我</label>
                    <div class="layui-input-inline" style="width:100px">
                        <input type="checkbox" checked=""  name="open" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                    </div>
                    <button class="layui-btn"   id="formLeaveMessage" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交留言</button>
                </div>
            </form>
        </div>
    </div>
    <div class="f-cb"></div>
    <div class="mt20">
        <ul class="message-list" id="message-list">

        </ul>
    </div>
</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="javascript:void(0)" class="github" ><i class="fa fa-github"></i></a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=845184365&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=jinbinvip@163.com" class="email" target="_blank" title="jinbinvip@163.com"><i class="fa fa-envelope"></i></a>
                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2021-2022 二水个人博客 All Rights Reserved V.1.0.0 苏ICP备2021026193号-1
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
    <script src="js/pagemessage.js"></script>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/ershui/common.js"></script>
    <script>NProgress.start();</script>
    <script>
        // 单击之后提交按钮不可选,防止重复提交
        var DISABLED = 'layui-btn-disabled';

        window.onload = function () {
            NProgress.done();

            layui.use(['form','layedit'], function(){
                var form = layui.form
                    ,layer = layui.layer,
                    layedit = layui.layedit;


                //监听提交
                form.on('submit(formLeaveMessage)', function(data){
                    // 增加样式
                    $('#formLeaveMessage').addClass(DISABLED);
                    // 增加属性
                    $('#formLeaveMessage').attr('disabled', 'disabled');
                    var data=data.field;
                    var param={
                        "memberName":data.membername,
                        "memberEmail":data.memberemail,
                        "memberUrl":data.memberurl,
                        "isNotice":data.open === 'on'?1:0,
                        "content":data.editorContent
                    }
                    //留言添加
                    $.ajax({
                        type:"post",
                        url:"/Blog/addLeaveWords",
                        dataType: 'json',
                        data:JSON.stringify(param),
                        contentType : 'application/json;charset=utf-8',
                        success:function (result) {
                            if(result.code==web_status.SUCCESS){
                                location.reload();
                            }else{

                            }
                        }
                    });
                    return false;
                });

                //加载留言记录
                loadComment('');


                //监听回复
                form.on('submit(formReply)', function(data){
                    var data=data.field;
                    // 增加样式
                    $(this).addClass(DISABLED);
                    // 增加属性
                    $(this).attr('disabled', 'disabled');
                    var param={
                        "parentId":data.targetUserId,
                        "memberName":data.membername,
                        "memberEmail":data.memberemail,
                        "memberUrl":data.memberurl,
                        "content":data.replyContent
                    }
                    //留言添加
                    $.ajax({
                        type:"post",
                        url:"/Blog/addLeaveWords",
                        dataType: 'json',
                        data:JSON.stringify(param),
                        contentType : 'application/json;charset=utf-8',
                        success:function (result) {
                            if(result.code==web_status.SUCCESS){
                                location.reload();
                            }else{

                            }
                        }
                    });
                    return false;
                });

            });


        };


    </script>
</body>
</html>
